// 存储数据
// var arr = localStorage.getItem('sili') ? JSON.parse(localStorage.getItem('sili')) : []
var leftArr = []
var rightArr = [
  {
    id: +new Date(),
    demo: "aaa"
  },
  {
    id: +new Date(),
    demo: "bbb"
  }
]

// 存储选择到的元素对象
var left = []
var right = []

// 渲染数据到左边页面
function leftshow(arr) {
  var str = ''
  for (var i = 0; i < arr.length; i++) {
    str += ` <li onclick='leftselect(${arr[i].id})'>${i + 1}.${arr[i].demo}</li>`
  }
  document.querySelector('#leftul').innerHTML = str
}
leftshow(leftArr)
// 渲染数据到右边页面
function rightshow(arr) {
  var str = ''
  for (var i = 0; i < arr.length; i++) {
    str += ` <li onclick='rightselect(${arr[i].id})'>${i + 1}.${arr[i].demo}</li>`
  }
  document.querySelector('#rightul').innerHTML = str
}
rightshow(rightArr)

// 获取元素对象
var inp = document.querySelector('#input')
var btn = document.querySelector('#btn')
// 通过事件绑定实现添加
btn.onclick = function () {
  leftArr.push({
    id: +new Date(),
    demo: inp.value
  })
  localStorage.setItem('sili', JSON.stringify(leftArr))
  leftshow(leftArr)
}

// 获取左边选择到的数据  存到left数组里面
function leftselect(T) {
  var e = window.event
  // 判断left数组里面是否有已经选择到的数据对象
  var index = left.findIndex(function (item) {
    return item == T
  })
  console.log('index', index);
  if (index == -1) {
    e.target.style.background = 'red'
    left.push(T)
  } else {
    e.target.style.background = ''
    left.splice(index, 1)
  }
  console.log('left', left);
}
// 获取右边的数据 保存到right数组里面
function rightselect(T) {
  var e = window.event
  // 判断right数组里面是否有已经选择到的数据对象
  var index = right.findIndex(function (item) {
    return item == T
  })
  if (index == -1) {
    e.target.style.background = 'red'
    right.push(T)
  } else {
    e.target.style.background = ''
    right.splice(index, 1)
  }
}
// 向右移动
var toright = document.getElementById('toright')
toright.onclick = function () {
  for (var i = 0; i < left.length; i++) {
    var index = leftArr.findIndex(function (item) {
      return item.id == left[i]
    })
    // 先push再删除
    rightArr.push(leftArr[index])
    leftArr.splice(index, 1)
  }
  // 左右都要渲染
  leftshow(leftArr)
  rightshow(rightArr)
  // 清空left和right
  left = []
}

// 向左移动
var toleft = document.getElementById('toleft')
toleft.onclick = function () {
  for (var i = 0; i < right.length; i++) {
    var index = rightArr.findIndex(function (v) {
      return v.id == right[i]
    })
    leftArr.push(rightArr[index])
    rightArr.splice(index, 1)
  }
  leftshow(leftArr)
  rightshow(rightArr)

  right = []
}

// 全部向左
var toleftAll = document.querySelector("#toleftAll")
toleftAll.onclick = function () {
  var m = rightArr.concat(leftArr)
 leftArr=m
 rightArr=[]
 leftshow(leftArr)
 rightshow(rightArr)
}

// 全部向右
var torightAll = document.querySelector("#torightAll")
torightAll.onclick = function () {
  var m = rightArr.concat(leftArr)
 leftArr=[]
 rightArr=m
 leftshow(leftArr)
 rightshow(rightArr)
}